<template>
	<view
		:style="{ 'justify-content': justifyContent }"
		class="uni-trick-title"
	>
		<template v-if="showLine">
			<view class="title__line-box title__line-box__left">
				<text
					:style="{ 'background-color': color }"
					class="title__line"
				></text>
				<text
					:style="{ 'background-color': color }"
					class="title__dot"
				></text>
			</view>
		</template>
		<view class="title__middle">
			<view class="title__icon">
				<uni-icon
					v-if="iconName"
					:size="iconSize"
					:color="iconColor"
					:name="iconName"
				>
				</uni-icon>
			</view>
			<text
				:style="{ color: titleColor, 'font-weight': fontWeight }"
				class="title__name"
				>{{ title }}</text
			>
		</view>
		<!--  -->
		<template v-if="showLine">
			<view class="title__line-box title__line-box__right">
				<text
					:style="{ 'background-color': color }"
					class="title__dot"
				></text>
				<text
					:style="{ 'background-color': color }"
					class="title__line"
				></text>
			</view>
		</template>

		<!-- 右边箭头 -->
		<template v-if="showRightArrow">
			<view class="right-arrow" @click.stop="loginNavTo('/pages/common/pages/live/live')">
				<image class="zz-img-fit" :src="`${baseCommonFileUri}image/live-icon-arrow.png`"></image>
			</view>
		</template>
	</view>
</template>

<script>
import uniIcon from "@/components/uniIcon/uniIcon";
export default {
	components: {
		uniIcon
	},

	props: {
		title: {
			type: String,
			default: "我是标题"
		},

		fontWeight: {
			type: String,
			default: "400"
		},

		titleColor: {
			type: String,
			default: ""
		},

		iconColor: {
			type: String,
			default: ""
		},

		color: {
			type: String,
			default: ""
		},

		justifyContent: {
			type: String,
			default: "centent"
		},

		iconSize: {
			type: String,
			default: "40rpx"
		},

		iconName: {
			type: String,
			default: ""
		},

		showLine: {
			type: Boolean,
			default: true
		},

		showRightArrow:{
			type: Boolean,
			default: false
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-trick-title {
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;

	.title__middle {
		display: flex;
		align-items: center;
		.title__icon {
			margin-right: 12rpx;
		}
		.title__name {
			font-size: $theme-size-large-base;
			color: $theme-color-main-base;
		}
	}

	/** 点缀线条 begin */
	.title__line-box__right {
		justify-content: flex-end;
		margin-left: 14rpx;
	}

	.title__line-box__left {
		justify-content: flex-start;
		margin-right: 14rpx;
	}

	.title__line-box {
		display: flex;
		align-items: center;

		.title__line {
			width: 28rpx;
			height: 2rpx;
		}
		.title__dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 100%;
			overflow: hidden;
		}
	}

	/** 点缀线条 end */
	/* 右边箭头 */
	.right-arrow {
		position:absolute;
		right:0;
		top:50%;
		transform:translateY(-50%);
		width:44rpx;
		height:44rpx;
	}
}
</style>